<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./echarts/echarts.min.js"></script>
</head>

<body>
  <div id="main" style="width: 100%;height:600px;"></div>
  <script>
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector('#main'));

    // 指定图表的配置项和数据
    const option = {
      // 1.鼠标移入提示框
      tooltip: {
        trigger: 'axis',
        position: function (pt) {
          return [pt[0], '10%'];
        }
      },

      // 2.图表标题
      title: {
        left: 'left',
        text: '2021全学科薪资走势'
      },

      // 4.x轴（必须）
      xAxis: {
        type: 'category',
        // 折线图左右两边的间距留白
        boundaryGap: true,

        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "11月", "12月"]
      },

      // 5.y轴（必须）
      yAxis: {
        type: 'value',
        min: 0,
        max: 25000,
        boundaryGap: [0, '100%'],
        splitLine: {
          lineStyle: {
            type: 'dashed',
            width: 2,
            color: '#ccc'
          }
        },
      },

      // 7.图标的内容
      series: [
        {
          name: '薪资',
          type: 'line',
          // 折线图的小圆点
          symbol: 'emptyCircle',
          // 小圆点大小
          symbolSize: 8,
          // 解决数据过多圈圈拥挤的问题
          sampling: 'lttb',
          // 线条颜色样式
          itemStyle: {
            color: '#0c94ea',
          },
          lineStyle: {
            // 控制线条宽度粗细
            width: 5,
          },
          // 折线区域
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#7eb9f1'
              },
              {
                offset: 0.7,
                color: '#fff'
              },
              {
                offset: 1,
                color: '#fff'
              }
            ])
          },
          data: [24000, 23000, 10000, 13000, 10000, 16000, 10000, 10000, 17000, 18000, 23000],
          smooth: true
        }
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>